<template>
    <div class="goLogin">
        <div>
            <LoginBack @leftClick="leftClick"></LoginBack>
        </div>
        <div class="login-box">
            <!-- 登录 -->
            <div class="form-box">
                <van-form @submit="login">
                    <van-field v-model="userInfoLogin.phone" name="phone" label="手机号" placeholder="手机号" :rules="[
                        { required: true, message: '请填写手机号' },
                        { pattern: phoneReg, message: '手机号格式不正确' },
                    ]" autocomplete="off" />

                    <van-field v-model="userInfoLogin.password" :type="isViewLoginPwd ? 'text' : 'password'"
                        name="password" label="密码" placeholder="密码" :rules="[
                            { required: true, message: '请填写密码' },
                            {
                                pattern: passwordReg,
                                message: '密码首字符为字母，可由字母数字下划线组合',
                            },
                        ]" :right-icon="isViewLoginPwd ? 'eye-o' : 'closed-eye'" autocomplete="off"
                        @click-right-icon="viewLoginPwd" />

                    <div class="forgot">
                        <div class="forgot-text">忘记密码？</div>
                    </div>

                    <div class="login-btn">
                        <van-button round block color="#4CE99A" native-type="submit">登录</van-button>
                    </div>

                    <div class="r-btn">
                        <van-button round block type="default" native-type="button"
                            @click="showRegister">注册</van-button>
                    </div>
                </van-form>
            </div>
        </div>
        <van-popup v-model="isShow" position="bottom" closeable>
            <div class="register">
                <div class="r-title">注册</div>
                <div class="f-box">
                    <van-form @submit="register">
                        <van-field v-model="userInfoRegister.phone" name="phone" label="手机号" placeholder="手机号" :rules="[
                            { required: true, message: '请填写手机号' },
                            { pattern: phoneReg, message: '手机号格式不正确' },
                        ]" autocomplete="off" />

                        <van-field v-model="userInfoRegister.password" :type="isViewRegPwd ? 'text' : 'password'"
                            name="password" label="密码" placeholder="密码(6-16位)" :rules="[
                                { required: true, message: '请填写密码' },
                                {
                                    pattern: passwordReg,
                                    message: '密码首字符为字母，可由字母数字下划线组合',
                                },
                            ]" :right-icon="isViewRegPwd ? 'eye-o' : 'closed-eye'" autocomplete="off"
                            @click-right-icon="viewRegPwd" />

                        <van-field v-model="userInfoRegister.nickname" name="nickname" label="昵称"
                            placeholder="昵称(1-16位)" :rules="[
                                { required: true, message: '请填写昵称' },
                                { pattern: nicknameReg, message: '昵称可由中文组合' },
                            ]" autocomplete="off" />

                        <div class="register-btn">
                            <van-button round block color="#4CE99A" native-type="submit">注册</van-button>
                        </div>
                    </van-form>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import LoginBack from "@/components/loginBack.vue";
import { Toast } from "vant";
export default {
    name: "GoLogin",
    components: {
        LoginBack,
    },
    data() {
        return {
            //登录数据
            userInfoLogin: {
                phone: "",
                password: "",
                id: ""
            },

            //注册数据
            userInfoRegister: {
                phone: "",
                password: "",
                nickname: "",
                captcha: " ",
            },

            //是否显示注册弹窗
            isShow: false,

            //手机号正则表达式
            phoneReg: /^1[3-9]\d{9}$/,

            //密码正则表达式(首字符为字母，可由字母数字下划线组合[6-16位])
            passwordReg: /^[A-Za-z]\w{5,15}$/,

            //昵称正则表达式(中英文组合[1-16])
            nicknameReg: /^[A-Za-z\u4e00-\u9fa5]{1,16}$/,

            //查看注册密码
            isViewRegPwd: false,

            //查看登录密码
            isViewLoginPwd: false,
        };
    },

    methods: {
        leftClick() {
            this.$router.back();
        },

        //显示注册弹窗
        showRegister() {
            this.isShow = true;
        },

        //查看注册密码
        viewRegPwd() {
            this.isViewRegPwd = !this.isViewRegPwd;
        },

        //查看登录密码
        viewLoginPwd() {
            this.isViewLoginPwd = !this.isViewLoginPwd;
        },

        //注册
        register(userInfo) {
              
            if (userInfo) {
                let logonInfo = window.localStorage.getItem("logonInfo")
                if (!logonInfo) {
                    logonInfo = []
                } else {
                    logonInfo = JSON.parse(logonInfo)
                }

                let isHasLogon = false
                for (let index = 0; index < logonInfo.length; index++) {
                    if (logonInfo[index].phone === this.userInfoLogin.phone) {
                        isHasLogon = true
                          
                        this.$router.push({ name: "My" });
                        return;
                    };

                }

                logonInfo.push(userInfo)

                  
                let obj = {};
                logonInfo = logonInfo.reduce((cur, next) => {
                    obj[next.id] ? '' : (obj[next.id] = true && cur.push(next));
                    return cur;

                }, [])
                  
                window.localStorage.setItem('logonInfo', JSON.stringify(logonInfo))
                Toast("注册成功");
            }
        },

        //登录
        login(userInfo) {
              

            let logonInfo = JSON.parse(window.localStorage.getItem('logonInfo'))
              
            if (logonInfo) {
                for (let i = 0; i < logonInfo.length; i++) {
                    //   
                    // 如果注册的手机号和登录的手机号一致
                    if (logonInfo[i].phone === userInfo.phone) {
                        // 如果注册的密码和登录的密码一致
                        if (logonInfo[i].password === userInfo.password) {
                            let loginInfo = window.localStorage.getItem('loginInfo')
                            if (!loginInfo) {
                                loginInfo = []
                            } else {
                                loginInfo = JSON.parse(loginInfo)
                            }


                            loginInfo.push(logonInfo[i])


                            logonInfo[i].userId = new Date().getTime()
                              
                            window.localStorage.setItem('loginInfo', JSON.stringify(loginInfo))
                            Toast('登录成功')
                            this.$router.push('My')
                        } else {
                            Toast("账号或密码错误，请检查账号密码")
                        }

                    }
                }


            } else {
                Toast('您的账号未注册,请注册后登录')
                this.userInfoLogin = {
                    phone: "",
                    password: "",
                }
            }
        },

        //跳转首页
        goHome() {
            this.$router.push({ name: "Home" });
        },
    },
};
</script>

<style lang="less" scoped>
.login-box {
    padding: 15px;
    margin-top: 80px;
}

.left-content {
    display: flex;
    align-items: center;
}

.logo-text {
    font-weight: bold;
}

.logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

.right-text {
    color: #4ce99a;
}

.forgot {
    text-align: center;
    margin: 20px 0px;
}

.register {
    .r-title {
        font-size: 14px;
        width: 70px;
        margin: 10px 45%;
    }
}

.login-btn,
.r-btn,
.register-btn {
    margin: 10px 10px;
}

.van-button--primary {
    background-color: #4ce99a;
}
</style>
